<template>
  <slide-view
    v-empty="!canShowDetail"
    :listenerIDs="listenerIDs"
    :noListenerIDs="noListenerIDs"
    :noListenerClass="noListenerClass"
    @side-close="hideView"
    :body-style="{ height: '100%', overflow: 'auto' }"
    v-loading="loading"
  >
    <div class="detail-body">
      <h3>修改确认函</h3>
      <div style="padding: 20px 0">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="名称" prop="title">
            <el-input v-model="form.title" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              clearable
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSaveConfirm">保 存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table class="n-table--border" border stripe :data="category">
          <el-table-column prop="title" label="题目标题" />
          <el-table-column prop="remark" label="题目描述" />
          <el-table-column prop="types" label="题目类型">
            <template slot-scope="scope">
              {{ typeList[scope.row.types].label }}
            </template>
          </el-table-column>
          <el-table-column label="是否必填">
            <template slot-scope="scope">
              {{ scope.row.is_must == 1 ? "必填" : "非必填" }}
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="排序">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="sortCategory(scope.row, 0)">
                上移
              </el-button>
              <el-button type="text" size="mini" @click="sortCategory(scope.row, 1)">
                下移
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="editCategory(scope.row)">
                编辑
              </el-button>
              <el-button type="text" size="mini" @click="delCategory(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-button type="primary" @click="addCategory">添加题目</el-button>
      </div>
      <div v-if="categoryShow" style="padding: 20px 0">
        <el-form
          ref="categoryForm"
          :model="categoryForm"
          :rules="categoryRules"
          label-width="80px"
        >
          <el-form-item label="题目标题" prop="title">
            <el-input v-model="categoryForm.title" clearable style="width: 300px" />
          </el-form-item>
          <el-form-item label="题目描述" prop="remark">
            <el-input
              v-model="categoryForm.remark"
              type="textarea"
              clearable
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="题目类型" prop="types">
            <el-select
              v-model="categoryForm.types"
              style="width: 300px"
              @change="changeTypes"
            >
              <el-option
                v-for="(i, k) in typeList"
                :key="k"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否必填" prop="is_must">
            <el-radio-group v-model="categoryForm.is_must" style="width: 300px">
              <el-radio :label="1">必填</el-radio>
              <el-radio :label="0">非必填</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="categoryForm.types == 0 || categoryForm.types == 1"
            label="文本提示"
            prop="config.placeholder"
          >
            <el-input
              v-model="categoryForm.config.placeholder"
              clearable
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item
            v-if="
              categoryForm.types == 2 ||
              categoryForm.types == 3 ||
              categoryForm.types == 4
            "
            :label="categoryForm.types == 4 ? '表头' : '选项'"
            prop="config.options"
          >
            <div
              v-for="(i, k) in categoryForm.config.options"
              :key="k"
              style="display: flex"
            >
              <el-input
                v-model="i.label"
                :placeholder="`${categoryForm.types == 4 ? '表头' : '选项'}${k + 1}`"
                style="width: 300px; margin-right: 10px"
              />
              <div><i class="el-icon-delete" @click="delOption(k)" /></div>
            </div>
            <div>
              <el-button type="primary" @click="addOption">新增选项</el-button>
            </div>
          </el-form-item>
          <el-form-item
            v-if="categoryForm.types == 5 || categoryForm.types == 6"
            label="单位"
            prop="config.unit"
          >
            <el-select v-model="categoryForm.config.unit" style="width: 300px">
              <el-option
                v-for="(i, k) in unitList"
                :key="k"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSaveCategory">保 存</el-button>
            <el-button @click="cancelCategory">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </slide-view>
</template>

<script>
import {
  crmConfirmationRead,
  crmConfirmationUpdate,
  crmAddCategory,
  crmUpdateCategory,
  crmDelCategory,
  crmSortCategory,
} from "@/api/customermanagement/confirmation";
import SlideView from "@/components/SlideView";
import detail from "../mixins/detail";

export default {
  /** 客户管理 的 客户详情 */
  name: "confirmation-detail",
  components: {
    SlideView,
  },
  mixins: [detail],
  props: {
    // 详情信息id
    id: [String, Number],
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: "confirmation",
    },
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ["crm-main-container"];
      },
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ["el-table__body"];
      },
    },
  },
  data() {
    return {
      loading: false, // 展示加载loading
      form: {
        title: null, // 确认函名称
        remark: null, // 备注
      },
      rules: {
        title: [{ required: true, message: "请输入确认函名称", trigger: "blur" }],
      },
      category: [], // 题目
      typeList: [
        { label: "单行文本", value: 0 },
        { label: "多行文本", value: 1 },
        { label: "单项选择", value: 2 },
        { label: "多项选择", value: 3 },
        { label: "表格", value: 4 },
        { label: "时间", value: 5 },
        { label: "时间段", value: 6 },
      ],
      unitList: [
        { label: "年", value: "year" },
        { label: "月", value: "month" },
        { label: "日", value: "date" },
      ],
      categoryShow: false, // 显示类目
      categoryForm: {}, // 类目表单
      categoryRules: {
        title: [{ required: true, message: "请输入类目名称", trigger: "blur" }],
        types: [{ required: true, message: "请选择类目类型", trigger: "change" }],
        is_must: [{ required: true, message: "请选择是否必填", trigger: "change" }],
      }, // 类目表单验证
    };
  },
  methods: {
    // 查询确认函详情
    getDetial() {
      this.loading = true;
      crmConfirmationRead({
        confirmation_id: this.id,
      })
        .then((res) => {
          this.form = res.data;
          this.category = res.data.category;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 保存确认函
    onSaveConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.confirmation_id) {
            let data = Object.assign({}, this.form);
            delete data.category;
            crmConfirmationUpdate(data).then((res) => {
              this.$message.success("编辑成功");
              this.hideView();
              this.editSaveSuccess();
            });
          }
        }
      });
    },
    // 保存题目
    onSaveCategory() {
      this.$refs.categoryForm.validate((valid) => {
        if (valid) {
          if (this.categoryForm.confirmation_category_id) {
            crmUpdateCategory(this.categoryForm).then((res) => {
              this.onSaveSuccess();
            });
          } else {
            crmAddCategory(this.categoryForm).then((res) => {
              this.onSaveSuccess("编辑成功");
            });
          }
        }
      });
    },
    // 保存成功
    onSaveSuccess(tip = "新增成功") {
      this.$message.success(tip);
      this.categoryShow = false;
      this.categoryForm = {};
      this.editSaveSuccess();
    },
    // 重置表单
    reset() {
      this.categoryForm = {
        confirmation_id: this.form.confirmation_id,
        confirmation_category_id: null,
        title: null,
        remark: null,
        types: null,
        is_must: null,
        config: {},
      };
      try {
        this.$refs.categoryForm.resetFields();
      } catch (error) {}
    },
    // 切换类型
    changeTypes(val) {
      if (val == 0 || val == 1) {
        this.categoryForm.config = {
          placeholder: "",
        };
      } else if (val == 2 || val == 3 || val == 4) {
        this.categoryForm.config = {
          options: [{ value: "", label: "" }],
        };
      } else if (val == 5 || val == 6) {
        this.categoryForm.config = {
          unit: "",
        };
      }
    },
    // 添加选项
    addOption() {
      this.categoryForm.config.options.push({
        value: "",
        label: "",
      });
    },
    // 删除选项
    delOption(index) {
      this.categoryForm.config.options.splice(index, 1);
    },
    // 新增题目
    addCategory() {
      this.categoryShow = true;
      this.reset();
    },
    // 取消编辑
    cancelCategory() {
      this.categoryShow = false;
      this.categoryForm = {};
    },
    // 编辑题目
    editCategory(row) {
      if (
        this.categoryShow &&
        this.categoryForm.confirmation_category_id == row.confirmation_category_id
      ) {
        this.categoryShow = false;
        this.categoryForm = {};
      } else {
        this.categoryForm = Object.assign({}, row);
        this.categoryShow = true;
      }
    },
    // 删除题目
    delCategory(row) {
      this.$confirm("确定删除该题目吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = { confirmation_category_id: row.confirmation_category_id };
          crmDelCategory(data).then(() => {
            this.$message.success("删除成功");
            this.getDetial();
          });
        })
        .catch(() => {});
    },
    // 排序 0上移 1下移
    sortCategory(row, type) {
      crmSortCategory({
        confirmation_category_id: row.confirmation_category_id,
        type,
      }).then((res) => {
        this.getDetial();
      });
    },
    //** 点击关闭按钮隐藏视图 */
    hideView() {
      this.$emit("hide-view");
    },
    editSaveSuccess() {
      this.$emit("handle", { type: "save-success" });
      this.getDetial();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/crmdetail.scss";
</style>
